﻿@{
    ViewData["Title"] = "Home Page";
}
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link href="~/css/stuPrimary.css" rel="stylesheet" />
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>
<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3643291_ddm9j4xkghv.css" />
<form id="form1" runat="server" class="animate__animated  animate__fadeIn  ">
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="/images/c10.jpg" />
            </div>
            <div class="swiper-slide">
                <img src="/images/bgc.jpg" />
            </div>
            <div class="swiper-slide">
                <img src="/images/c0.jpg" />
            </div>
            <div class="swiper-slide">
                <img src="/images/cherry.jpg" />
            </div>
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-pagination"></div>
    </div>
    <div class="content">
        <a class="toggle" href="javaScript:"></a>
        <div id="waterEle">
            <section><text class="iconfont icon-shuidiantu"></text></section>
            <h3>水电查询</h3>
        </div>
        <div id="repair">
            <section><text class="iconfont icon-baoxiu-weixuanzhong"></text></section>
            <h3>报修申请</h3>
        </div>
        <div id="login">
            <section><text class="iconfont icon-8-susheguanli"></text></section>
            <h3>后台登录</h3>
        </div>
        <div id="replyExit">
            <section><text class="iconfont icon-sushe"></text></section>
            <h3>退宿申请</h3>
        </div>
        <div id="weiji">
            <section><text class="iconfont icon-jinzhidengji_o"></text></section>
            <h3>违规记录</h3>
        </div>
        <div id="advice">
            <section><text class="iconfont icon-fankuiyijian"></text></section>
            <h3>反馈建议</h3>
        </div>
    </div>
</form>
<script>
    var swiper = new Swiper(".mySwiper", {
        spaceBetween: 30,
        centeredSlides: true,
        loop: {

        },
        autoplay: {
            delay: 3000,
            disableOnInteraction: false,
        },
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
        effect: 'fade',
    })
    $('#repair').click(function () {
        location.href = '/RepairRecords/Create';
    })
    $('#waterEle').click(function () {
        location.href = './searchWaterEle.aspx';
    })
    $("#weiji").click(function () {
        location.href = './weijiRecord.aspx';
    })
    $('#advice').click(function () {
        location.href = './advice.aspx';
    })
    $('#login').click(function () {
        location.href = '/bghome';
    })
    $('#replyExit').click(function () {
        location.href = './QuitDorm.aspx';
    })

    //1
    let flag = true;
    $(window).scroll(function () {
        var swiper = document.querySelector('.swiper');
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop > swiper.offsetTop) {
            $('header').slideUp();
            $('.swiper').css({ 'height': '100%' })
        }
        else {
            $('.swiper').css({ 'position': 'fixed', 'height': '65%' })
            $("header").slideDown();
        }
    })

    $('.toggle').click(function () {
        if (flag) {
            $('html').animate({ scrollTop: $('body').height() }, 1200)
            flag = false;

        }
        else {
            $('html').animate({ scrollTop: 0 }, "slow")
            flag = true;
        }
    })
</script>